<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- HTML结构 -->
    <form id="test-form" action="test">
        <legend>请选择想要学习的编程语言：</legend>
        <fieldset>
            <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span
                        class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
            <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
            <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
            <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
            <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
            <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
            <p><button type="submit">Submit</button></p>
        </fieldset>
    </form>


    <!-- HTML结构 -->
    <ul id="test-list">
        <li>JavaScript</li>
        <li>Swift</li>
        <li>HTML</li>
        <li>ANSI C</li>
        <li>CSS</li>
        <li>DirectX</li>
    </ul>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="js.js"></script>

    <script>
        // var b = $('#test-list li')
        // console.log(b);
        // b[1].remove();
        // b[3].remove();
        // b[5].remove();

        // 当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；
        // 当用户去掉“全不选”时，自动不选中所有语言；
        // 当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；
        // 当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
        // 当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”


        var a = $('input'); //全选
        var b = $('.invertSelect') //反选


        //全选
        $(a[0]).on('click', function () {
            for (let i = 1; i < a.length; i++) {
                if(a[0].checked === true){
                    a[i].checked = true;
                }else{
                    a[i].checked  = false;
                }
            }
        });
            

        //反选
        $(b[0]).on('click', function () {
            if (isall() === false) {
                for (let i = 1; i < a.length; i++) {
                    if (a[i].checked === false) {
                        a[i].checked = true;
                    } else {
                        a[i].checked = false;
                    }
                    a[0].checked = false;
                }
            } else {
                for (let i = 0; i < a.length; i++) {
                    if (a[i].checked === true) {
                        a[i].checked = false;
                    } else {
                        a[i].checked = true;
                    }
                }
            }

        })

        //逐个判断
        for (let i = 1; i < a.length; i++) {
            $(a[i]).on('click', function () {
                if (isall2() === true) {
                    a[0].checked = true;
                } else {
                    a[0].checked = false;
                }
            })
        }

        //判断是否为全选或全不选
        function isall() {
            var count = 0;
            for (let i = 1; i < a.length; i++) {
                if (a[i].checked === true) {
                    count++;
                } else {
                    count--;
                }
            }
            if (count === a.length - 1 || count === -(a.length - 1)) {
                return true
            }
            return false;
        }

        // 判断为全选
        function isall2() {
            var count = 0;
            for (let i = 1; i < a.length; i++) {
                if (a[i].checked === true) {
                    count++;
                } else {
                    count--;
                }
            }
            if (count === a.length - 1) {
                return true
            }
            return false;
        }

    </script>
</body>

</html>